<template>
    <!-- pages/maker/buymaker/paysucceed/index.wxml -->
    <view>
        <view class="paysucced">
            <image class="paysuccedimg" :src="imgUrl + 'pay-succed.png'"></image>
        </view>
        <view class="see">恭喜您！您的订单已支付成功，赠送现金券已到账！</view>
        <view>
            <buttom @tap.native="toHome" class="tohome">返回首页</buttom>
            <buttom @tap.native="toDetail" class="tomeal">我的创客</buttom>
        </view>
        <view class="flexbox-sb">
            <view>推荐创客礼包</view>
            <view class="centers" @tap.stop.prevent="toMroe">
                <view class="text">查看更多</view>
                <image :src="imgUrl + 'right2.png'" class="icon-32"></image>
            </view>
        </view>
        <view class="hrs"></view>
        <view class="mkbox2">
            <view
                class="shopbox mt-20"
                @tap="gotoNext"
                :data-url="item.url"
                :data-goodsid="item.id"
                :data-productSn="item.productSn"
                v-for="(item, index) in ProductList"
                :key="index"
            >
                <view>
                    <image class="shopimg" :src="item.pic"></image>
                </view>

                <view class="goods_sold padding-lr-sm text-sm text-white" v-if="item.sale">已售: {{ item.sale }}</view>

                <view class="pd-20">
                    <view class="shoptext1 mr-20">{{ item.name }}</view>
                    <view class="shoptext2">
                        <text class="mr-20">¥{{ item.price }}</text>
                        <text v-if="item.originalPrice">¥{{ item.originalPrice }}</text>
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
// pages/maker/buymaker/paysucceed/index.js
const app = getApp(); // 引入app

import _request from '../../../../utils/request.js';
export default {
    data() {
        return {
            imgUrl: app.globalData.imgUrl,

            //全局img路径
            bool: false,

            ProductList: [],
            pages: 0,
            size: 6,
            makerDetail: ''
        };
    }
    /**
     * 生命周期函数--监听页面加载
     */,
    onLoad: function () {
        // 获取列表数据
        this.getProductPackageInfo();
    },
    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady: function () {},
    /**
     * 生命周期函数--监听页面显示
     */
    onShow: function () {
        this.getuserMakerInfo();
    },
    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide: function () {},
    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload: function () {
        if (!this.bool) {
            uni.redirectTo({
                url: '/page/maker/makerdetails/index?title=' + this.makerDetail.description
            });
        }
    },
    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh: function () {
        uni.stopPullDownRefresh(); //停止下拉刷新
    },
    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom: function () {
        // this.data.pages = this.data.pages + 1;
        // this.getProductPackageInfo();
    },
    /**
     * 用户点击右上角分享
     */
    onShareAppMessage: function () {},
    methods: {
        getparams: function (item) {
            const list = [];

            for (const key in item) {
                if (key === 'url') {
                    continue;
                }

                list.push(key + '=' + item[key]);
            }

            if (list.length) {
                return '?' + list.join('&');
            } else {
                return '';
            }
        },

        // 返回首页
        toHome() {
            uni.setStorageSync('paysucceed', '1');
            this.setData(
                {
                    bool: true
                },
                () => {
                    uni.switchTab({
                        url: '/firstpages/home/index'
                    });
                }
            );
        },

        // 前往详情
        toDetail() {
            uni.redirectTo({
                url: '/pages/maker/makerdetails/index?title=' + this.makerDetail.description
            });
        },

        // 创客大礼包
        toMroe() {
            this.setData({
                bool: true
            });
            uni.redirectTo({
                url: '/shopingmall/markerlist/markerlist'
            });
        },

        // 获取用户创客信息
        getuserMakerInfo() {
            _request
                .get('/maker/userMakerInfo', {
                    userId: uni.getStorageSync('userid')
                })
                .then((res) => {
                    if (res.data.code == 200) {
                        this.setData({
                            makerDetail: res.data.data
                        });
                    }
                });
        },

        // 获取赠送创客卡的商品套餐列表
        getProductPackageInfo() {
            _request
                .get(
                    '/mall-product/list',
                    {
                        status: 4,
                        offset: this.pages,
                        size: this.size,
                        type: 1,
                        userId: uni.getStorageSync('userId')
                    },
                    app.globalData.mallType
                )
                .then((res) => {
                    this.setData({
                        ProductList: res.data.data.sort((a, b) => {
                            return b.sort - a.sort;
                        })
                    });
                });
        },

        gotoNext: function (item) {
            uni.navigateTo({
                url: '/shopingmall/goodsdetail/goodsdetail' + this.getparams(item.currentTarget.dataset)
            });
        }
    }
};
</script>
<style>
/* pages/maker/buymaker/paysucceed/index.wxss */

page > view:nth-child(1) {
    margin-top: 40rpx;
    text-align: center;
}

.mt-206 {
    margin-top: 206rpx;
}

.see {
    margin-top: 46rpx;
    text-align: center;
    font-family: PingFangSC-Regular, PingFang SC;
    color: #999999;
    font-size: 28rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #666666;
    line-height: 40rpx;
}

.paysucced {
    display: flex;
    justify-content: center;
}

.paysuccedimg {
    width: 340rpx;
    height: 186rpx;
}

page > view > view:nth-child(3) {
    margin-top: 72rpx;
    display: flex;
    justify-content: center;
}

.tohome {
    display: inline-block;
    width: 260rpx;
    height: 88rpx;
    background: #fbfbfb;
    line-height: 88rpx;
    color: #ff8722;
    box-shadow: 0px 2px 4px 0px rgba(255, 128, 0, 0.26);
    border-radius: 44rpx;
    border: 1px solid #ff8722;
    margin-right: 75rpx;
    text-align: center;
}

.tomeal {
    display: inline-block;
    width: 288rpx;
    height: 88rpx;
    background: #ff8722;
    line-height: 88rpx;
    color: white;
    box-shadow: 0px 2px 4px 0px rgba(255, 128, 0, 0.26);
    border-radius: 44rpx;
    border: 1px solid #ff8722;
    text-align: center;
}

.flexbox-sb {
    padding: 0 30rpx;
    align-items: center;
    margin-top: 60rpx;
}

.text {
    font-size: 28rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #666666;
}

.hrs {
    margin: 20rpx;
    width: 710rpx;
}

.centers-c {
    display: flex;
    justify-content: center;
}

.shopbox {
    width: 340rpx;
    background: #ffffff;
    box-shadow: 0px 2px 4px 0px rgba(230, 230, 230, 0.5);
    border-radius: 10px;
    position: relative;
}

.shopimg {
    width: 340rpx;
    height: 340rpx;
}

.pd-20 {
    padding: 20rpx;
    text-align: left;
}

.shoptext1 {
    height: 80rpx;
    font-size: 28rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #333333;
    line-height: 40rpx;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}

.shoptext2 text:nth-child(1) {
    height: 44rpx;
    font-size: 24rpx;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #ff1717;
    line-height: 44rpx;
}

.shoptext2 text:nth-child(2) {
    height: 34rpx;
    font-size: 24rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #666666;
    line-height: 34rpx;
    text-decoration: line-through;
}

.mkbox2 {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    margin-top: 70rpx;
    padding: 0 20rpx;
}
</style>
